<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h3{
        height: 500px;
    }
</style>
<body>
    <!-- 防抖定义：对于短时间内连续触发的事件（滚动事件），防抖的含义就是让某个时
    间限制内，事件处理函数只执行一次 -->
    <!-- 页面resize事件，常见于需要做页面适配的时候，需要根据最终呈现的页面情况进行DOM
    渲染（这种情况一般使用防抖，应为只需要判断最后一次的变化情况）-->
    <h3>哈哈哈</h3>
    <h3>哈哈哈</h3>
    <h3>哈哈哈</h3>
    <h3>哈哈哈</h3>
    <h3>哈哈哈</h3>
    <h3>哈哈哈</h3>
    <h3>哈哈哈</h3>
    <script>

        //滚动事件
        // window.onscroll = function(){
        //     console.log("页面滚动了");
        // }
        function debounce(fn,delay){
            var timer = null;
            return function(){
                if(timer){
                    clearTimeout(timer);
                }
                    timer = setTimeout(fn,delay)
                
            }
        }
        window.onscroll = debounce(scrollHandle,200);
        function scrollHandle(){
           var scrollTop = document.documentElement.scrollTop;
           console.log(scrollTop);
        }


    </script>
</body>
</html>